<template>
  <div class="topNav">
    <div class="top_left">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-iconfront-"></use>
      </svg>
    </div>
    <div class="top_center">
      <div @click="open_rote('About',$event)" :class="state.cur" class="nav_btn">我的</div>
      <div @click="open_rote('Home',$event)" :class="state.cur" class="nav_btn cur">发现</div>
      <div class="nav_btn">云村</div>
      <div class="nav_btn">视频</div>
    </div>
    <div class="top_right">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-sousuo"></use>
      </svg>
    </div>
  </div>
</template>

<script>
import {reactive,watch } from "vue";
import {useRouter,useRoute } from "vue-router";
  export default {
    setup(){
      let router=useRouter()
      const route = useRoute()
      let state=reactive({
        cur:""
      })
      function open_rote(router_name,even){
        //window.location.pathname
        //router.push({name:router_name})
      }
      return {
        open_rote,
        state
      }
    }
  }
</script>

<style lang="less" scoped>
.topNav{
  width: 7.5rem;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.2rem;
  .icon{
    width: 0.45rem!important;
    height: 0.45rem!important;
  }
  .top_center{
    display: flex;
    justify-content: space-around;
    width: 4.5rem;
    .cur{
      font-weight: bold;
      font-size: 0.31rem;
    }
  }
}
</style>